<template>
  <!-- 所有赞助人列表 -->
  <div class="container">
    <!-- 顶部清除浮动线 -->
    <div class="line"></div>
    <!-- 中间整个容器 -->
    <div class="container-in">
      <!-- 左边大容器 -->
      <div class="main">
        <h1>※ 所有赞助人 ※ </h1>
        <el-tabs v-model="activeName" stretch>
          <!-- 赞助人 开始 -->
          <el-tab-pane label="赞助人" name="first">
            <!-- 搜索框 -->
            <div class="search">
              <el-input clearable placeholder="请输入用户名" v-model="patronSearchObj.username" class="input-with-select"
                        @keyup.enter.native="patronSearch(patronSearchObj.username)">
                <el-button slot="append" icon="el-icon-search"
                           @click.native="patronSearch(patronSearchObj.username)"></el-button>
              </el-input>
            </div>
            <!-- 赞助人 信息 -->
            <el-card class="box-card" v-for="item in patronList" :key="item.id">
              <div class="content-box">
                <div>
                  <nuxt-link :to="'/user/'+item.userId">
                    <p>赞助人：{{ item.username }}</p>
                  </nuxt-link>
                  <p>赞助金额： {{ item.amount }} 元</p>
                  <p>赞助致辞： {{ item.message }}</p>
                  <p>赞助时间： {{ getDateFormat(item.createTime) }}</p>
                </div>
                <div>
                  <!-- 跳转到用户个人主页 -->
                  <nuxt-link :to="'/user/'+item.userId">
                    <img class="avatar" :src="item.avatar" alt="" lazy/>
                  </nuxt-link>
                </div>
              </div>
            </el-card>
            <!-- 分页组件 -->
            <div class="page">
              <!-- md 分页组件 开始 -->
              <el-pagination
                class="sm-hidden"
                background
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-size="size"
                layout="total, prev, pager, next, jumper"
                :total="Number(patronTotal)">
              </el-pagination>
              <!-- sm 分页组件 开始 -->
              <el-pagination
                class="md-hidden"
                small
                background
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-size="size"
                layout="total,prev, pager, next"
                :total="Number(patronTotal)">
              </el-pagination>
            </div>
            <!-- /分页组件 结束 -->
          </el-tab-pane>
          <!-- /赞助人 结束 -->
          <!-- VIP赞助人 开始 -->
          <el-tab-pane label="VIP赞助人" name="second">
            <!-- 搜索框 -->
            <div class="search">
              <el-input clearable placeholder="请输入用户名" v-model="sponsorSearchObj.username" class="input-with-select"
                        @keyup.enter.native="sponsorSearchUsername(sponsorSearchObj.username)">
                <el-button slot="append" icon="el-icon-search"
                           @click.native="sponsorSearchUsername(sponsorSearchObj.username)"></el-button>
              </el-input>
              <el-button class="amount" slot="append" @click.native="sponsorSearchAmount()">赞助金额 ↓</el-button>
            </div>
            <!-- VIP赞助人 信息 -->
            <el-card class="box-card sponsor-card" v-for="item in sponsorList" :key="item.id">
              <div class="content-box">
                <div>
                  <nuxt-link :to="'/user/'+item.userId">
                    <p>VIP赞助人：{{ item.username }}</p>
                  </nuxt-link>
                  <p>赞助金额： {{ item.amount }} 元</p>
                  <p>赞助致辞： {{ item.message }}</p>
                  <p>赞助时间： {{ getDateFormat(item.createTime) }}</p>
                </div>
                <div>
                  <!-- 跳转到用户个人主页 -->
                  <nuxt-link :to="'/user/'+item.userId">
                    <img class="avatar" :src="item.avatar" alt="" lazy/>
                  </nuxt-link>
                </div>
              </div>
            </el-card>
            <!-- 分页组件 -->
            <div class="vip-page">
              <!-- md 分页组件 开始 -->
              <el-pagination
                class="sm-hidden"
                background
                @current-change="handleCurrentChangeSponsors"
                :current-page="current"
                :page-size="size"
                layout="total, prev, pager, next, jumper"
                :total="Number(sponsorTotal)">
              </el-pagination>
              <!-- sm 分页组件 开始 -->
              <el-pagination
                class="md-hidden"
                small
                background
                @current-change="handleCurrentChangeSponsors"
                :current-page="current"
                :page-size="size"
                layout="total,prev, pager, next"
                :total="Number(sponsorTotal)">
              </el-pagination>
            </div>
            <!-- /分页组件 结束 -->
          </el-tab-pane>
          <!-- /VIP赞助人 结束 -->
        </el-tabs>
      </div>
      <!-- 右则边栏 开始 -->
      <template>
        <!-- 子组件-发布新贴入口 -->
        <Add/>
        <!-- 子组件-随机诗语 -->
        <Aphorism :content="randomTip.content" :author="randomTip.author"/>
        <!-- 子组件-文章推荐 -->
        <Recommend v-bind:recommendArticleList="recommendArticleList"/>
        <!-- 子组件-轮播图 -->
        <Looper v-bind:looperListRight="looperListRight"/>
        <!-- 子组件-VIP赞助人 -->
        <Sponsor v-bind:sponsors="sponsors" :isOpenSponsor="isOpenSponsor"/>
        <!-- 子组件 - 赞助1元/成为VIP赞助人 -->
        <Patron v-bind:patronTop36="patronTop36" :isOpenPatron="isOpenPatron"
                :addPatronData="addPatronData" @addPatron="addPatron"
                @openPatron="openPatron" @handleClosePatron="handleClosePatron"
                :addSponsorData="addSponsorData" @addSponsor="addSponsor" :isOpenSponsor="isOpenSponsor"
                @openSponsor="openSponsor" @handleCloseSponsor="handleCloseSponsor"/>

      </template>
      <!-- /右则边栏 结束 -->
    </div>
    <!-- 底部清除浮动线 -->
    <div class="line-bottom"></div>
  </div>
</template>
<script>
import {dateFormat} from '@/utils/date' // 日期格式化
import Add from '@/components/article/add'  // 子组件-发布新贴入口
import Aphorism from '@/components/aside/aphorism'  // 子组件-右则随机诗语
import Recommend from '@/components/aside/recommend'  // 子组件-右则文章推荐
import Looper from '@/components/aside/looper'  // 子组件-右则小轮播图
import Sponsor from '@/components/aside/sponsor'  // 子组件-右则VIP赞助人
import Patron from '@/components/aside/patron' // 子组件-赞助1元-成为VIP赞助人

export default {
  name: 'patron',
  // 动态标题
  head() {
    return {
      title: '所有赞助人 - 经历网'
    }
  },
  components: {
    Add,
    Aphorism,
    Recommend,
    Looper,
    Sponsor,
    Patron
  },
  // 服务端获取数据
  async asyncData({app, route}) {
    // 获取路由中的参数，拼接地址查询
    const query = route.query
    // 首页文章列表
    const current = 1
    const size = 10
    // 赞助人条件搜索对象
    const patronSearchObj = {
      username: ''
    }
    // 赞助人查询条件
    patronSearchObj.username = query.username || ''
    // VIP赞助人查询条件
    // 条件搜索对象
    const sponsorSearchObj = {
      username: ''
    }
    sponsorSearchObj.username = query.username || ''
    sponsorSearchObj.amount = query.amount || ''
    // 条件分页查询赞助人列表
    const {data: patrons} = await app.$getPatronListPage(current, size, patronSearchObj)
    const patronTotal = patrons.total
    const patronList = patrons.records
    // 条件分页查询VIP赞助人列表
    const {data: vip} = await app.$getSponsorListPage(current, size, sponsorSearchObj)
    const sponsorTotal = vip.total
    const sponsorList = vip.records
    // 随机诗语
    const {data: aphorism} = await app.$getRandomTip()
    const randomTip = aphorism.randomTip
    // 文章推荐列表
    const {data: recommend} = await app.$getArticleRecommendList()
    const recommendArticleList = recommend.recommendList
    // 轮播图 - 右边栏
    const {data: looperRight} = await app.$getPatronRightLooperList()
    const looperListRight = looperRight.looperListRight
    // VIP赞助人
    const {data: sponsor} = await app.$getSponsorList()
    const sponsors = sponsor.sponsors
    // 赞助人
    const {data: patron} = await app.$getPatronTop36()
    const patronTop36 = patron.patronList

    return {
      current,
      size,
      patronTotal,
      patronSearchObj,
      patronList,
      sponsorSearchObj,
      sponsorTotal,
      sponsorList,
      randomTip,
      recommendArticleList,
      looperListRight,
      sponsors,
      patronTop36
    }
  },
  data() {
    return {
      activeName: 'first',
      current: 1,
      size: 10,
      patronSearchObj: {
        username: ''
      },
      patronTotal: 0,
      patronList: [],
      // 新增赞助人-窗口
      dialogWidth: false,
      isOpenPatron: false,
      addPatronData: {
        amount: 0,
        message: "",
        payNumber: ""
      },
      // 赞助人-窗口
      isOpenSponsor: false,
      addSponsorData: {
        amount: 0,
        message: "",
        payNumber: ""
      }
    };
  },

  methods: {
    // 格式化日期时间
    getDateFormat(date) {
      return dateFormat(date)
    },
    // 条件分页查询赞助人列表
    async fetchPatronData() {
      const {data} = await this.$getPatronListPage(this.current, this.size, this.patronSearchObj)
      this.patronList = data.records
      this.patronTotal = data.total
    },
    // 根据用户名查询赞助人(使用拼接地址的方式，方法用户转发地址直接到当前页面）
    patronSearch(username) {
      window.location = '?patron&current=1&size=10&username=' + username;
    },
    // 赞助人-切换页码
    handleCurrentChange(current) {
      this.current = current
      this.fetchPatronData()
    },

    // 条件分页查询VIP赞助人列表
    async fetchSponsorData() {
      const {data} = await this.$getSponsorListPage(this.current, this.size, this.sponsorSearchObj)
      this.sponsorList = data.records
      this.sponsorTotal = data.total
    },
    // 根据用户名查询VIP赞助人(使用拼接地址的方式，方法用户转发地址直接到当前页面）
    sponsorSearchUsername(username) {
      window.location = '?current=1&size=10&username=' + username;
    },
    // 根据赞助金额倒序查询VIP赞助人
    sponsorSearchAmount() {
      window.location = '?sponsor&current=1&size=10&amount=1';
    },
    // VIP赞助人切换页码
    handleCurrentChangeSponsors(current) {
      this.current = current
      this.fetchSponsorData()
    },
    // 刷新-赞助1元-数据列表
    async getPatron() {
      const {data} = await this.$getPatronTop36()
      this.patronTop36 = data.patronList
    },
    // 新增-赞助1元
    async addPatron() {
      await this.$addPatron(this.addPatronData).then(response => {
        if (response.code === 200) {
          // 后端接口会删除缓存
          this.getPatron()
          this.isOpenPatron = !this.isOpenPatron
          this.$message.success('赞助成功')
        } else {
          this.$message.error(response.message)
        }
      })
    },
    // 打开-赞助1元-窗口
    openPatron() {
      this.addPatronData.message = ''
      this.addPatronData.payNumber = ''
      this.isOpenPatron = !this.isOpenPatron
    },
    // 关闭-赞助1元-窗口
    handleClosePatron() {
      this.addPatronData.message = ''
      this.addPatronData.payNumber = ''
      this.isOpenPatron = !this.isOpenPatron
    },
    // 获取所有VIP赞助人
    async getSponsor() {
      const {data} = await this.$getSponsorList()
      this.sponsors = data.sponsors
    },
    // 成为VIP赞助人-新增
    async addSponsor() {
      await this.$addSponsor(this.addSponsorData).then(response => {
        if (response.code === 200) {
          // 刷新VIP赞助人列表，后端接口会删除缓存
          this.getSponsor()
          this.isOpenSponsor = !this.isOpenSponsor
          this.$message.success('赞助成功')
        } else {
          this.$message.error(response.message)
        }
      });
    },
    // 成为VIP赞助人-打开-窗口
    openSponsor() {
      this.addSponsorData.message = ''
      this.addSponsorData.payNumber = ''
      this.isOpenSponsor = !this.isOpenSponsor
    },
    // 成为VIP赞助人-关闭-窗口
    handleCloseSponsor() {
      this.addSponsorData.message = ''
      this.addSponsorData.payNumber = ''
      this.isOpenSponsor = !this.isOpenSponsor
    }
  }
}
</script>
<style lang="less" scoped>

.line {
  clear: both;
}

// 公共样式
.avatar {
  padding: 1px;
  border: #bbbec3 solid 1px;
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  object-fit: cover;
}

.avatar:hover {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

// 公共搜索框
.search {
  display: flex;
  justify-content: center;
  margin: 20px auto 40px;

  .el-button {
    padding: 8px 20px;
    -webkit-border-top-right-radius: 6px;
    border-top-left-radius: 6px;
  }

  .el-input__inner {
    height: 42px;
  }
}

// 最外层容器
.container {
  min-height: 630px;

  // 页面左则容器、右则容器
  .main, .aside {
    background-color: #FFFFFF;
  }

  .main {
    border-radius: 4px;

    h1 {
      text-align: center;
    }

    .sponsor-card {
      background: #FFFFFF;
    }

    .el-tabs {
      border-radius: 4px;
      background: #dcdbdb;

      // VIP赞助人按金额排序按钮
      .amount {
        margin-left: 5px;
        font-weight: bold;
        color: #e0dede;
        background: #2b2b2b;
      }
    }

    .el-pagination {
      text-align: center;
    }

    .page {
      padding: 20px 0 80px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      background: url("~@/assets/img/patron/1.gif") no-repeat 0 0;
      background-size: 100% 100%;
    }

    .vip-page {
      padding: 20px 0 80px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      background: url("~@/assets/img/patron/2.gif") no-repeat 0 0;
      background-size: 100% 100%;
    }
  }
}

.aside {
  .el-button {
    width: 100%;
    color: #cccccc;
    background-color: black;
  }

  .el-button:hover {
    color: white;
  }
}

// --------------- md ------------------>
@media screen and (min-width: 960px) {
  .container {
    background: #242424;

    .container-in {
      width: 80%;
      padding-bottom: 26px;
      margin: 0 auto;
      border-radius: 4px;

      .main {
        float: left;
        width: 75%;
        border-radius: 4px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);

        .search {
          .el-input {
            width: 50%;
          }
        }

        .content-box {
          display: flex;
          justify-content: space-between;
          width: 70%;
          margin: 0 auto;
          font-size: 16px;
          font-weight: bold;

          .avatar {
            width: 90px;
            height: 90px;
          }
        }
      }

      .aside {
        float: left;
        width: 23%;
        margin-left: 26px;
        margin-bottom: 20px;
        border-radius: 4px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
      }
    }
  }
}

// ------------- sm -------------->
@media screen and (max-width: 960px) {
  .line-top {
    clear: both;
    //width: 100%;
    //height: 1px;
    //background-color: black;
  }

  .container {

    .container-in {
      width: 100%;

      .main {
        width: 100%;
        margin: 0 auto;

        h1 {
          padding-top: 20px;
        }

        .search {
          width: 100%;
          padding: 10px;

          .el-input {
            width: 80%;
          }

          .amount {
            margin-right: 20px;
          }
        }

        .content-box {
          display: flex;
          justify-content: space-between;
          margin: 0 auto;
          font-size: 14px;
          font-weight: bold;

          .avatar {
            width: 80px;
            height: 80px;
          }
        }

      }

      .aside {
        float: left;
        width: 100%;
        margin-bottom: 20px;
      }
    }
  }

}
</style>
